<script setup lang="ts">
import { defineProps } from "vue";
import { numberToEncoded } from "@/utils/numbers";
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  value: {
    type: Number,
    default: 0,
  },
  icon: {
    type: String,
    default: "",
  },
});
</script>
<template>
  <div class="center-item">
    <div
      class="icons"
      :style="{ backgroundImage: `url(${icon ? icon : '/d1-1.png'})` }"
    ></div>
    <div class="title">{{ title }}</div>
    <div class="values">{{ numberToEncoded(value) }}</div>
  </div>
</template>
<style scoped>
.center-item {
  display: inline-block;
  background-image: url("/d1.png");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  width: 226px;
  height: 64px;
  display: flex;
  gap: 10px;
}
.icons {
  width: 70px;
  background-image: url("d1-1.png");
  background-repeat: no-repeat;
  background-size: 32px 24px;
  background-position: center;
  background-position-x: 26px;
  background-position-y: 17px;
}

.title,
.values {
  display: flex;
  align-items: center;
}
.title {
  font-family: "MyFont1";
}
.values {
  color: #00ffff;
  font-size: 20px;
  font-family: fantasy;
}
</style>
